<template>
  <li class="classifyitem" @click="showlist(feilei)">
    <img :src="feilei.image_url" alt="" />
    <span>
      {{ feilei.name }}
    </span>
  </li>
</template>

<script>
import { mapMutations } from "vuex";

export default {
  props: ["feilei", "itemkid"],
  methods: {
    ...mapMutations(["increment"]),
    showlist(v) {
      this.$router.push({
        path: "/footswamp",
        query: {
          id: v.id,
          title: v.name,
          maxtitle: this.itemkid,
        },
      });
      this.increment({ list: v });
      window.localStorage.setItem("list", JSON.stringify(v));
    },
  },
};
</script>

<style lang="less" scoped>
.classifyitem {
  margin: 20px;
  flex: 1;
  width: 20%;
  max-width: 20%;
  min-width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  img {
    width: 50px;
  }
  span {
    color: gray;
    font-size: 12px;
    margin-top: 8px;
  }
}
</style>